/* =========================================================
   CABRALIZE ♥ Folha de estilo principal
   Cores da marca (tiradas do logo, banner e Fundo.png)
   ========================================================= */
:root {
	--rosa:        #e7598b;   /* coração do logo / destaque */
	--rosa-escuro: #c2477a;   /* faixa "DO SEU JEITO" do banner */
	--rosa-claro:  #f6d3df;
	--rosa-bebe:   #FFE4E1;
	--lilas:       #b3a7c9;
	--azul:        #82aacd;   /* lado azul do degradê */
	--azul-claro:  #dce9f5;
	--texto:       #3b2f36;
	--texto-suave: #7a6a73;
	--fundo:       #fff8fa;
	--branco:      #ffffff;
	--degrade:     linear-gradient(100deg, #e6aebd 0%, #b8a8c8 50%, #82aacd 100%);
	--sombra:      0 6px 20px rgba(194, 71, 122, .12);
	--raio:        18px;
}

/* ------ Geral ------ */
* { box-sizing: border-box; }

body {
	font-family: "Delius", sans-serif;
	color: var(--texto);
	background: var(--fundo);
	margin: 0;
}

.espacamento { padding: 12px; max-width: 1200px; margin: 0 auto; }

ul { list-style: none; padding: 0; margin: 0; }
a  { color: var(--rosa-escuro); }
img { max-width: 100%; }

/* Títulos com a fonte Borel; o resto do site usa Delius (definida no body) */
h1, h2, .titulo-marca { font-family: "Borel", cursive; font-weight: 400; color: var(--rosa-escuro); }
h1 { font-size: 30px; margin: 10px 0 6px; line-height: 1.6; }
h2 { font-size: 24px; text-align: center; line-height: 1.6; margin: 8px 0; }
h3 { margin: 6px 0; }

.subtitulo { text-align: center; color: var(--texto-suave); margin-top: -4px; }
.centro { text-align: center; }
.oculto { display: none !important; }

/* ------ TOPO ------ */
#topo {
	background: var(--degrade);
	background-image: url('Imagens/Fundo.png'), var(--degrade);
	background-size: cover;
	border-radius: var(--raio);
	padding: 14px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}
#topo .logo img {
	width: 230px;           /* logo sem fundo, direto sobre o degradê */
	display: block;
}
.slogan { margin: 0; font-weight: bold; font-size: 18px; color: var(--branco); text-shadow: 0 1px 3px rgba(0,0,0,.25); }
.heart_logo { color: var(--rosa); margin: 0 6px; text-shadow: none; }
.topo-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.topo-acoes a {
	background: rgba(255,255,255,.9);
	color: var(--texto);
	text-decoration: none;
	padding: 9px 14px;
	border-radius: 30px;
	font-weight: bold;
	white-space: nowrap;
}
.topo-acoes a:hover { color: var(--rosa); }
#contador {
	background: var(--rosa); color: #fff; border-radius: 20px;
	padding: 1px 8px; font-size: 13px; margin-left: 4px;
}

/* ------ MENU HORIZONTAL ------ */
#menu_horizontal {
	background: var(--branco);
	border-radius: var(--raio);
	box-shadow: var(--sombra);
	margin-top: 10px;
	padding: 6px;
}
#menu { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; }
#menu a {
	display: block;
	color: var(--texto);
	text-decoration: none;
	font-size: 17px;
	font-weight: bold;
	padding: 8px 16px;
	border-radius: 30px;
}
#menu a:hover { color: var(--rosa); background: var(--rosa-bebe); }
#menu a.ativo { color: #fff; background: var(--rosa); }
#menu a.ativo::before { content: "♥ "; }

/* ------ BANNER ------ */
#Banner { margin-top: 12px; }
#Banner img { width: 100%; border-radius: var(--raio); display: block; box-shadow: var(--sombra); }

/* ------ CAIXAS / SEÇÕES ------ */
.secao { margin-top: 26px; }
.caixa {
	background: var(--branco);
	border-radius: var(--raio);
	box-shadow: var(--sombra);
	padding: 20px;
}
.caixa-rosa { background: var(--rosa-bebe); }

.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.passo { text-align: center; padding: 18px; }
.passo .icone { font-size: 34px; }
.passo b { display: block; color: var(--rosa-escuro); margin: 6px 0; }

/* Cartões de categoria na página inicial */
.categorias { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.categoria {
	text-decoration: none; color: var(--texto);
	background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra);
	overflow: hidden; transition: transform .2s;
}
.categoria:hover { transform: translateY(-4px); }
.categoria .foto { background: var(--degrade); height: 170px; display: flex; align-items: center; justify-content: center; }
.categoria .foto img { max-height: 150px; }
.categoria .info { padding: 12px 16px; }
.categoria .info b { font-size: 19px; color: var(--rosa-escuro); }
.categoria .info small { display: block; color: var(--texto-suave); }

/* Técnicas */
.tecnicas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.tecnica h3 { color: var(--rosa-escuro); }

/* ------ CONTEÚDO COM MENU LATERAL ------ */
#Conteudo { display: flex; margin-top: 18px; gap: 18px; align-items: flex-start; }

#menu_vertical { width: 240px; flex-shrink: 0; }
#menu_vertical h3 { color: var(--rosa-escuro); margin-left: 6px; }
#menu_vertical ul a {
	display: block;
	background: var(--branco);
	color: var(--texto);
	border-radius: 14px;
	box-shadow: var(--sombra);
	font-weight: bold;
	text-decoration: none;
	padding: 11px 14px;
	margin-bottom: 8px;
	border-left: 5px solid var(--rosa-claro);
	cursor: pointer;
}
#menu_vertical ul a:hover { color: var(--rosa); }
#menu_vertical ul a.ativo { border-left-color: var(--rosa); color: var(--rosa); }
#menu_vertical ul a.ativo::before { content: "♥ "; }
.lateral-info { font-size: 14px; color: var(--texto-suave); margin-top: 12px; padding: 14px; }

/* ------ ÁREA DE PRODUTOS ------ */
#produtos, .vitrine {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 16px;
	flex: 1;
	width: 100%;
}
.produto {
	background: var(--branco);
	border-radius: var(--raio);
	box-shadow: var(--sombra);
	padding: 12px;
	text-align: center;
	display: flex; flex-direction: column;
	transition: transform .2s, box-shadow .2s;
	position: relative;
}
.produto:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(194,71,122,.2); }
.produto .foto {
	background: linear-gradient(160deg, var(--rosa-bebe), var(--azul-claro));
	border-radius: 14px; height: 180px;
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.produto .foto img { max-height: 170px; max-width: 100%; object-fit: contain; }
.produto .sem-foto { font-size: 54px; }
.produto h3 { font-size: 16px; margin-top: 10px; }
.produto .desc { font-size: 13px; color: var(--texto-suave); flex: 1; margin: 4px 0 8px; }
.produto .preco { font-size: 21px; font-weight: bold; color: var(--rosa-escuro); }
.produto .comprar { display: flex; gap: 6px; margin-top: 8px; }
.produto .comprar input { width: 56px; text-align: center; }
.produto .comprar button { flex: 1; }

.selo {
	position: absolute; top: 18px; left: 18px;
	font-size: 12px; font-weight: bold; padding: 3px 10px; border-radius: 20px;
	background: var(--branco); color: var(--rosa-escuro); box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.selo.laser { color: #3d6d99; }
.aviso-estoque { font-size: 12px; color: #b2581f; }
.esgotado { opacity: .6; }

/* ------ BOTÕES E FORMULÁRIOS ------ */
button, .botao {
	font-family: inherit; font-size: 15px; font-weight: bold;
	background: linear-gradient(120deg, var(--rosa), var(--rosa-escuro));
	color: #fff; border: none; border-radius: 30px;
	padding: 10px 18px; cursor: pointer; text-decoration: none; display: inline-block;
	text-align: center;
}
button:hover, .botao:hover { filter: brightness(1.08); }
button:disabled { background: #ccc; cursor: not-allowed; }
.botao-claro { background: var(--branco); color: var(--rosa-escuro); border: 2px solid var(--rosa-claro); }
.botao-azul  { background: linear-gradient(120deg, #8fb3d6, #5f8db8); }
.botao-vermelho { background: linear-gradient(120deg, #e57373, #c0392b); }
.botao-whats { background: linear-gradient(120deg, #3ccf6e, #1fa855); }
.botao-perigo { background: #d9534f; }
.botao-pequeno { padding: 5px 11px; font-size: 13px; }

input, select, textarea {
	font-family: inherit; font-size: 15px;
	border: 2px solid var(--rosa-claro); border-radius: 12px;
	padding: 9px 12px; width: 100%; background: #fff; color: var(--texto);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--rosa); }
input[type=checkbox], input[type=radio] { width: auto; }
label { font-weight: bold; font-size: 14px; display: block; margin: 10px 0 4px; }
label .obrig { color: var(--rosa); }

.linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.opcoes label { font-weight: normal; display: flex; gap: 8px; align-items: center; margin: 6px 0; cursor: pointer; }

/* ------ CARRINHO / PAGAMENTO ------ */
.duas-colunas { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; margin-top: 18px; align-items: start; }
.item-carrinho {
	display: grid; grid-template-columns: 70px 1fr auto; gap: 12px;
	border-bottom: 1px dashed var(--rosa-claro); padding: 12px 0; align-items: center;
}
.item-carrinho .mini {
	width: 70px; height: 70px; border-radius: 12px; overflow: hidden;
	background: linear-gradient(160deg, var(--rosa-bebe), var(--azul-claro));
	display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.item-carrinho .mini img { max-height: 66px; }
.qtd { display: flex; align-items: center; gap: 6px; }
.qtd button { padding: 2px 10px; }
.item-carrinho textarea { margin-top: 6px; font-size: 13px; padding: 6px 10px; }
.caixa-cep { background: var(--rosa-bebe); border-radius: 14px; padding: 2px 14px 14px; margin-top: 8px; }
.caixa-cep input[readonly] { background: #f7f2f4; color: var(--texto-suave); }
.cupom { margin-top: 14px; padding: 12px; background: var(--rosa-bebe); border-radius: 14px; }
.cupom label { margin-top: 0; }
.cupom-linha { display: flex; gap: 8px; }
.cupom-linha input { text-transform: uppercase; }
.msg-cupom { font-size: 13px; margin: 6px 0 0; min-height: 0; }
.msg-cupom.ok { color: #1e7a45; font-weight: bold; }
.msg-cupom.erro { color: #c0392b; }
.msg-cupom.aviso { color: var(--rosa-escuro); background: #fff; border-radius: 10px; padding: 8px 10px; line-height: 1.5; }
.resumo-valores { margin-top: 12px; font-size: 15px; }
.resumo-valores div { display: flex; justify-content: space-between; padding: 3px 0; }
.resumo-valores .desconto { color: #1e7a45; font-weight: bold; }
.total { font-size: 24px; font-weight: bold; color: var(--rosa-escuro); text-align: right; margin-top: 10px; }
.abas-login { display: flex; gap: 8px; margin-bottom: 10px; }
.abas-login button { flex: 1; }
.alerta { background: var(--azul-claro); border-radius: 12px; padding: 10px 14px; font-size: 14px; margin: 10px 0; }
.alerta-rosa { background: var(--rosa-bebe); }

/* ------ ACOMPANHAMENTO ------ */
.linha-tempo { list-style: none; padding: 0; margin: 18px 0; }
.linha-tempo li {
	position: relative; padding: 0 0 18px 38px; color: var(--texto-suave);
}
.linha-tempo li::before {
	content: ""; position: absolute; left: 8px; top: 2px; width: 16px; height: 16px;
	border-radius: 50%; background: #eee; border: 3px solid #ddd;
}
.linha-tempo li::after {
	content: ""; position: absolute; left: 17px; top: 22px; bottom: 0; width: 2px; background: #eee;
}
.linha-tempo li:last-child::after { display: none; }
.linha-tempo li.feito { color: var(--texto); }
.linha-tempo li.feito::before { background: var(--rosa); border-color: var(--rosa-claro); }
.linha-tempo li.feito::after { background: var(--rosa-claro); }
.linha-tempo li.atual { font-weight: bold; color: var(--rosa-escuro); }

/* ------ TERMOS ------ */
.termos { line-height: 1.65; }
.termos h3 { color: var(--rosa-escuro); margin-top: 22px; }
.termos .destaque { background: var(--rosa-bebe); border-left: 5px solid var(--rosa); padding: 10px 14px; border-radius: 10px; }

/* ------ AVISO FLUTUANTE (toast) ------ */
#toast {
	position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(120px);
	background: var(--texto); color: #fff; padding: 12px 22px; border-radius: 30px;
	transition: transform .3s; z-index: 999; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
#toast.mostrar { transform: translateX(-50%) translateY(0); }

/* ------ RODAPÉ ------ */
#Rodape {
	background-image: url('Imagens/Fundo.png'), var(--degrade);
	background-size: cover;
	border-radius: var(--raio);
	margin-top: 36px;
	padding: 22px;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
#Rodape .colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
#Rodape a { color: #fff; display: block; margin: 4px 0; }
#Rodape .copy { text-align: center; margin-top: 16px; font-size: 14px; }
#Rodape .area-loja { font-size: 12px; opacity: .8; display: inline; }

/* =========================================================
   PAINEL ADMINISTRATIVO
   ========================================================= */
.admin-topo { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.abas { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.abas button { background: var(--branco); color: var(--texto); box-shadow: var(--sombra); }
.abas button.ativo { background: linear-gradient(120deg, var(--rosa), var(--rosa-escuro)); color: #fff; }

.etapas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.etapa { border-radius: 14px; padding: 12px 14px; cursor: pointer; border: 2px solid transparent; transition: transform .15s; }
.etapa:hover { transform: translateY(-3px); border-color: rgba(0,0,0,.08); }
.etapa b { display: block; font-size: 26px; line-height: 1.2; }
.etapa span { display: block; font-size: 13px; font-weight: bold; }
.etapa small { display: block; font-size: 12px; opacity: .85; }
.etapa.destaque-pagar { background: #fff1c2; color: #8a6a00; outline: 2px dashed #e0b84a; }
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.cartao { background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra); padding: 16px; }
.cartao small { color: var(--texto-suave); display: block; }
.cartao b { font-size: 24px; color: var(--rosa-escuro); }
.cartao.azul b { color: #3d6d99; }

.tabela-rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; background: var(--rosa-bebe); color: var(--rosa-escuro); padding: 9px; }
th:first-child { border-radius: 10px 0 0 10px; }
th:last-child  { border-radius: 0 10px 10px 0; }
td { padding: 9px; border-bottom: 1px solid #f3e3e9; vertical-align: middle; }
td input, td select { padding: 5px 8px; font-size: 14px; }
td .miniatura { width: 46px; height: 46px; object-fit: contain; border-radius: 8px; background: var(--rosa-bebe); }
tr.baixo td { background: #fff4e5; }
tr.zerado td { background: #ffe9e9; }

.etiqueta { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: bold; background: #eee; }
.st-recebido   { background: #fff1c2; color: #8a6a00; }
.st-confirmado { background: #dce9f5; color: #2f5d88; }
.st-arte       { background: #efe3ff; color: #6a3fa0; }
.st-producao   { background: #ffe0ec; color: #b0306a; }
.st-pronto     { background: #d8f5e3; color: #1e7a45; }
.st-enviado    { background: #d4f1f7; color: #16707f; }
.st-entregue   { background: #c9f0d6; color: #11603a; }
.st-cancelado  { background: #f3d6d6; color: #8b2b2b; }
.st-estornado  { background: #ead7e9; color: #7a2d6e; }
.st-alteracao  { background: #ffe2c6; color: #9a4a00; }
.pago-sim { color: #1e7a45; font-weight: bold; }
.pago-nao { color: #b2581f; font-weight: bold; }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin-bottom: 12px; }
.filtros > * { width: auto; }
.acoes-linha { display: flex; gap: 4px; flex-wrap: wrap; }

.modal-fundo {
	position: fixed; inset: 0; background: rgba(59,47,54,.45);
	display: flex; align-items: center; justify-content: center; z-index: 900; padding: 14px;
}
.modal { background: #fff; border-radius: var(--raio); padding: 22px; max-width: 640px; width: 100%; max-height: 90vh; overflow: auto; }

.preview-img { width: 120px; height: 120px; object-fit: contain; border-radius: 12px; background: var(--rosa-bebe); display: block; margin-top: 8px; }
.barra { height: 10px; background: var(--rosa-bebe); border-radius: 10px; overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--degrade); }

/* ------ CELULAR ------ */
@media (max-width: 800px) {
	#Conteudo { flex-direction: column; }
	#menu_vertical { width: 100%; }
	.lateral-info { display: none; }
	#menu_vertical ul { display: flex; flex-wrap: wrap; gap: 6px; }
	#menu_vertical ul a { margin: 0; }
	.duas-colunas { grid-template-columns: 1fr; }
	#topo { justify-content: center; text-align: center; }
	#topo .logo img { width: 200px; }
	h1 { font-size: 24px; }
}

/* =========================================================
   CELULAR (telas até 600px): tudo mais compacto
   ========================================================= */
@media (max-width: 600px) {
	.espacamento { padding: 8px; }
	h1 { font-size: 22px; margin: 8px 0 2px; }
	h2 { font-size: 20px; }
	.subtitulo { font-size: 14px; }
	.secao { margin-top: 18px; }
	.caixa { padding: 14px; }

	/* Topo numa linha: logo à esquerda, botões à direita */
	#topo { flex-wrap: nowrap; justify-content: space-between; padding: 8px 10px; gap: 6px; text-align: left; }
	#topo .logo img { width: 120px; }
	.slogan { display: none; }
	.topo-acoes { gap: 4px; flex-wrap: nowrap; }
	.topo-acoes a { padding: 7px 10px; font-size: 13px; }

	/* Menu em 2 linhas de 3 botões: tudo à vista, sem precisar deslizar */
	#menu_horizontal { padding: 6px; margin-top: 8px; }
	#menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
	#menu a { font-size: 14px; padding: 7px 4px; text-align: center; white-space: nowrap; border-radius: 20px; }
	#menu a.ativo::before { content: ""; }
	.so-computador { display: none; }

	#Banner { margin-top: 8px; }

	/* Como funciona: 2 por linha */
	.passos { grid-template-columns: 1fr 1fr; gap: 8px; }
	.passo { padding: 8px 4px; font-size: 13px; }
	.passo .icone { font-size: 26px; }

	/* Categorias lado a lado */
	.categorias { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.categoria .foto { height: 90px; }
	.categoria .foto img { max-height: 80px; }
	.categoria .foto span { font-size: 48px !important; }
	.categoria .info { padding: 8px; text-align: center; }
	.categoria .info b { font-size: 14px; }
	.categoria .info small { display: none; }

	/* Produtos: 2 por linha */
	#produtos, .vitrine { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.produto { padding: 8px; border-radius: 14px; }
	.produto .foto { height: 130px; border-radius: 10px; }
	.produto .foto img { max-height: 122px; }
	.produto .sem-foto { font-size: 40px; }
	.produto h3 { font-size: 13px; margin: 6px 0 2px; }
	.produto .desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px; margin: 2px 0 4px; }
	.produto .preco { font-size: 16px; }
	.produto .comprar { gap: 4px; margin-top: 6px; }
	.produto .comprar input { width: 40px; padding: 6px 2px; font-size: 14px; }
	.produto .comprar button { padding: 8px 4px; font-size: 12px; }
	.selo { top: 12px; left: 12px; font-size: 10px; padding: 2px 7px; }
	.aviso-estoque { font-size: 11px; }

	/* Página de categoria: tipos em fila */
	#Conteudo { margin-top: 10px; gap: 10px; }
	#menu_vertical h3 { display: none; }
	#menu_vertical ul a { padding: 7px 12px; font-size: 13px; border-left-width: 3px; }

	/* Carrinho: foto + nome em cima, quantidade e preço embaixo */
	.duas-colunas { gap: 12px; margin-top: 10px; }
	.item-carrinho { grid-template-columns: 56px 1fr; gap: 8px 10px; }
	.item-carrinho .mini { width: 56px; height: 56px; font-size: 24px; }
	.item-carrinho .mini img { max-height: 52px; }
	.item-carrinho > div:last-child { grid-column: 2; display: flex; align-items: center; justify-content: space-between; text-align: left; }
	.item-carrinho > div:last-child br { display: none; }
	.total { font-size: 20px; }
	.abas-login { flex-direction: column; }
	.linha { grid-template-columns: 1fr; gap: 0; }
	.caixa-cep .linha { grid-template-columns: 1fr 1fr; gap: 8px; }

	/* Rodapé mais curto */
	#Rodape { padding: 16px; margin-top: 24px; }
	#Rodape .colunas { gap: 10px; }
	#Rodape .colunas > div:nth-child(2) { display: none; }   /* os links já estão no menu */

	/* Painel no celular */
	.abas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
	.abas::-webkit-scrollbar { display: none; }
	.abas button { white-space: nowrap; padding: 8px 12px; font-size: 13px; }
	.cartoes { grid-template-columns: 1fr 1fr; gap: 8px; }
	.cartao { padding: 12px; }
	.cartao b { font-size: 19px; }
	.etapas { grid-template-columns: 1fr 1fr; }
	.admin-topo { flex-direction: column; align-items: stretch; }
	td, th { padding: 7px 6px; font-size: 13px; }
}

/* ---------- Frete: opções de envio no carrinho ---------- */
.opcoes-frete { display: grid; gap: 8px; margin-top: 6px; }
.opcao-frete { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-weight: normal;
	background: #fff; border: 2px solid var(--rosa-claro); border-radius: 14px; padding: 10px 12px; cursor: pointer; margin: 0; }
.opcao-frete:has(input:checked) { border-color: var(--rosa); background: var(--rosa-bebe); }
.opcao-frete small { color: var(--texto-suave); }

/* Janela de escolha com vários botões (painel) */
.escolhas { display: grid; gap: 12px; margin-top: 14px; }
.escolhas small { display: block; color: var(--texto-suave); text-align: center; margin-top: 3px; }

/* Termos: sumário das cláusulas e destaque da cláusula aberta pelo link */
.termos .sumario { display: flex; flex-wrap: wrap; gap: 6px 14px; background: #fff; border: 1px solid var(--rosa-claro); border-radius: 14px; padding: 12px 14px; margin: 14px 0; font-size: 14px; }
.termos .sumario b { flex-basis: 100%; }
.termos [id^="c"] { scroll-margin-top: 16px; }
.termos p:target, .termos h3:target { background: #fff3c4; border-radius: 8px; transition: background 1s; }
.termos ul { list-style: disc; padding-left: 22px; margin: 6px 0 12px; }
.termos li { margin: 4px 0; }

/* ---------- Cancelar, trocar ou relatar um problema (Solicitar.html) ---------- */
.sol { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.sol .caixa { display: flex; flex-direction: column; gap: 10px; }
.sol h1 { margin-bottom: 0; }
.sol-h2 { font-family: "Delius", sans-serif; font-size: 18px; color: var(--texto); margin: 0; }
.sol-topo { display: flex; justify-content: space-between; gap: 8px; font-size: 18px; }
.sol-valor { color: var(--rosa-escuro); font-size: 15px; }
.sol-cartao .etiqueta { align-self: flex-start; }
.sol-suave { margin: 0; font-size: 13px; color: var(--texto-suave); line-height: 1.45; }
.sol-motivos { display: grid; gap: 8px; }
.sol-motivo { grid-template-columns: auto 1fr auto; align-items: flex-start; }
.sol-motivo input { margin-top: 3px; }
.sol-motivo small { color: var(--texto-suave); line-height: 1.4; }
.sol-aviso { border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.5; margin: 0; }
.sol-verde   { background: #ddf3e6; color: #174d31; }
.sol-amarela { background: #fff1d6; color: #5c3d00; }
.sol-azul    { background: #e6effa; color: #1f3b5c; }
.sol-rosa    { background: var(--rosa-bebe); }
.sol-aviso a { color: inherit; }
.sol-contas { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.sol-contas > div { display: flex; justify-content: space-between; gap: 10px; }
.sol-contas .sol-menos { color: #8a2a1f; }
.sol-contas .sol-total { font-size: 17px; border-top: 1px solid var(--rosa-claro); padding-top: 6px; }
.sol-aceite { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: normal; }
.sol-aceite input { width: 20px; height: 20px; margin: 0; flex: 0 0 20px; accent-color: var(--rosa-escuro); }
.sol-botoes { display: flex; flex-direction: column; gap: 10px; }
.sol-botoes .botao, .sol-botoes button { width: 100%; text-align: center; }
.sol-citacao { margin: 0; background: #faf3f6; border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.sol-citacao small { color: var(--texto-suave); }
.sol-upload { border: 2px dashed var(--rosa-claro); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.sol-upload small { color: var(--texto-suave); line-height: 1.4; }
.sol-trilha { display: flex; flex-direction: column; }
.sol-passo { position: relative; display: flex; gap: 12px; padding-bottom: 14px; }
.sol-passo::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: 0; width: 2px; background: var(--rosa-claro); }
.sol-passo:last-child::after { display: none; }
.sol-passo > span { flex: 0 0 28px; height: 28px; border-radius: 14px; border: 2px solid var(--rosa-escuro); color: var(--rosa-escuro);
	display: flex; align-items: center; justify-content: center; font-size: 13px; background: #fff; }
.sol-passo.feito > span { background: #1f7a4d; border-color: #1f7a4d; color: #fff; }
.sol-passo.atual > span { background: var(--rosa-escuro); color: #fff; }
.sol-passo.atual b { color: var(--rosa-escuro); }
.sol-passo small { color: var(--texto-suave); line-height: 1.4; }
.acoes-pedido { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0; }

/* Painel: cancelamentos e problemas */
.contador-aba { background: #c0392b; color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; margin-left: 4px; }
.sit { display: inline-block; border-radius: 10px; padding: 3px 8px; font-size: 12px; font-weight: bold; }
.sit-nova { background: #fff1d6; color: #5c3d00; }
.sit-analise { background: #fff1d6; color: #5c3d00; }
.sit-negociacao { background: #e6effa; color: #1f3b5c; }
.sit-juridico { background: #fde3e1; color: #7a1d16; }
.sit-aprovada { background: #ddf3e6; color: #174d31; }
.sit-troca { background: #e6effa; color: #1f3b5c; }
.sit-recusada, .sit-concluida { background: #eee; color: #555; }
.checklist { display: grid; gap: 6px; margin: 8px 0; }
.checklist label { display: flex; align-items: center; gap: 10px; font-weight: normal; margin: 0; min-height: 36px; }
.checklist label input { width: 20px; height: 20px; margin: 0; accent-color: #1f7a4d; }
.checklist label.feito span { color: var(--texto-suave); text-decoration: line-through; }
.checklist label span { flex: 1; }
.provas { display: flex; flex-wrap: wrap; gap: 10px; }
.provas video, .provas img { max-width: 260px; max-height: 220px; border-radius: 10px; background: #000; }

/* cancelar só alguns itens */
.sol-itens { display: grid; gap: 8px; }
.sol-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--rosa-claro); border-radius: 12px; padding: 10px 12px; }
.sol-item small { color: var(--texto-suave); }
.sol-qtd { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sol-qtd .qtd { display: flex; align-items: center; gap: 8px; }
.sol-qtd .qtd button { width: 32px; height: 32px; padding: 0; border-radius: 50%; }

/* ---------- Menu com departamentos ---------- */
#menu > li { position: relative; }
#menu .seta { font-size: 11px; margin-left: 3px; }
#menu .submenu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #fff; border-radius: 16px;
	box-shadow: var(--sombra); padding: 10px; gap: 2px; min-width: 230px; z-index: 30; }
#menu .tem-sub:hover .submenu, #menu .tem-sub:focus-within .submenu { display: grid; }
#menu .submenu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
#menu .submenu a { display: flex; justify-content: space-between; gap: 10px; font-weight: normal; white-space: nowrap; }
#menu .submenu a::before { content: none !important; }
#menu .submenu small { color: var(--texto-suave); }
#menu .submenu .breve { opacity: .55; }
.botao-menu, .gaveta { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; justify-content: center; }
.chip { border: 2px solid var(--rosa-claro); background: #fff; color: var(--texto); border-radius: 20px; padding: 6px 14px; font-size: 14px; font-family: inherit; cursor: pointer; }
.chip:hover { filter: none; border-color: var(--rosa); }
.chip.ativo { background: var(--rosa); border-color: var(--rosa); color: #fff; }
.chip.breve, .chip:disabled { opacity: .5; cursor: default; background: #fff; }
.selo.kit { color: #a0631a; }
.riscado { text-decoration: line-through; color: var(--texto-suave); font-weight: normal; font-size: .75em; }
.produto h3 a { color: inherit; text-decoration: none; }
.produto a.foto { display: flex; }
/* departamentos na página inicial */
.departamentos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.depto { background: #fff; border-radius: var(--raio); box-shadow: var(--sombra); text-decoration: none; color: var(--texto); overflow: hidden; transition: transform .2s; }
.depto:hover { transform: translateY(-4px); }
.depto .capa { height: 120px; display: flex; align-items: center; justify-content: center; font-size: 54px; background: var(--degrade); }
.depto:nth-child(4n+2) .capa { background: linear-gradient(100deg, #f6c4d3, #e9b4c9); }
.depto:nth-child(4n+3) .capa { background: linear-gradient(100deg, #cfe3f5, #d9cdf0); }
.depto:nth-child(4n+4) .capa { background: linear-gradient(100deg, #f7c9d9, #f3dcb5); }
.depto .txt { padding: 10px 14px 14px; }
.depto b { color: var(--rosa-escuro); font-size: 18px; display: block; }
.depto small { color: var(--texto-suave); }
/* página do produto */
.pagina-produto { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.pagina-produto .foto-grande { background: var(--degrade); border-radius: var(--raio); min-height: 320px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pagina-produto .foto-grande img { max-height: 420px; }
.pagina-produto .foto-grande .sem-foto { font-size: 110px; }
.pagina-produto .kit-lista li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--rosa-claro); }
.economia { color: #1e7a45; font-weight: bold; }
.campos-pers { background: var(--rosa-bebe); border-radius: 14px; padding: 4px 14px 14px; margin: 12px 0; }
@media (max-width: 640px) {
	.departamentos { grid-template-columns: 1fr 1fr; gap: 10px; }
	.depto .capa { height: 90px; font-size: 40px; }
	.depto b { font-size: 16px; }
	.pagina-produto { grid-template-columns: 1fr; }
	.pagina-produto .foto-grande { min-height: 220px; }
	#menu { display: none !important; }
	.botao-menu { display: flex; justify-content: space-between; align-items: center; width: 100%; background: #fff; color: var(--rosa-escuro); border: 2px solid var(--rosa-claro); }
	.gaveta { display: block; background: #fff; border-radius: 16px; padding: 4px 12px; margin-top: 8px; }
	.gaveta.oculto { display: none !important; }
	.gaveta a { display: flex; justify-content: space-between; padding: 11px 6px; border-bottom: 1px solid #f6e3ea; text-decoration: none; color: var(--texto); font-size: 15px; }
	.gaveta .sub a { padding-left: 22px; font-size: 14px; color: var(--texto-suave); }
	.gaveta b { color: var(--rosa-escuro); }
}

.etq { display: inline-block; background: var(--rosa-bebe); border-radius: 10px; padding: 2px 8px; font-size: 12px; margin: 2px; }

/* Etapas da reclamação (1 de 2, 2 de 2) */
.sol-etapas { display: flex; gap: 8px; margin-bottom: 14px; }
.sol-etapas span { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px;
	background: #f6f0f3; color: var(--texto-suave); font-size: 14px; font-weight: 600; }
.sol-etapas span b { flex: 0 0 24px; height: 24px; border-radius: 12px; display: grid; place-items: center;
	border: 2px solid currentColor; font-size: 13px; }
.sol-etapas .atual { background: var(--rosa-claro); color: var(--rosa-escuro); }
.sol-etapas .atual b { background: var(--rosa-escuro); border-color: var(--rosa-escuro); color: #fff; }
.sol-etapas .feito { color: #1f7a4d; }
.sol-etapas .feito b { background: #1f7a4d; border-color: #1f7a4d; color: #fff; }

/* ---------- Personalizador de estampas ---------- */
.cores { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; }
.cores button { width: 34px; height: 34px; min-width: 34px; border-radius: 50%; padding: 0; border: 3px solid #fff; box-shadow: 0 0 0 1px #ddd; }
.cores button.ativo { box-shadow: 0 0 0 3px var(--rosa-escuro); }
.lista-estampas { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.cartao-estampa { background: #fff; border-radius: var(--raio); box-shadow: var(--sombra); padding: 10px; display: flex; flex-direction: column; gap: 3px; }
.cartao-estampa canvas { width: 100%; border-radius: 8px; border: 1px solid #f1e3e9; }
.cartao-estampa small { color: var(--texto-suave); }
.cartao-estampa.desligada { opacity: .65; }
.ed-estampa { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; align-items: start; }
.palco-estampa { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--rosa-claro); user-select: none; background: #fff; }
.palco-estampa canvas { width: 100%; display: block; }
.palco-vazio { display: block; text-align: center; padding: 70px 20px; cursor: pointer; background: var(--rosa-bebe); color: var(--rosa-escuro); }
.caixa-campo { position: absolute; border: 3px dashed; border-radius: 6px; cursor: move; touch-action: none; }
.caixa-campo span { position: absolute; top: -24px; left: -3px; color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 8px 8px 8px 0; white-space: nowrap; }
.caixa-campo.foto { border-color: #1f8a70; background: rgba(31,138,112,.08); color: #1f8a70; } .caixa-campo.foto span { background: #1f8a70; }
.caixa-campo.nome { border-color: #7a4fd0; background: rgba(122,79,208,.08); color: #7a4fd0; } .caixa-campo.nome span { background: #7a4fd0; }
.caixa-campo.sel { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--rosa-escuro); }
.caixa-campo i { position: absolute; right: -9px; bottom: -9px; width: 16px; height: 16px; background: #fff; border: 3px solid currentColor; border-radius: 4px; cursor: nwse-resize; }
.campo-ed { background: var(--rosa-bebe); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.campo-ed.sel { outline: 2px solid var(--rosa-escuro); }
.lista-checks { max-height: 180px; overflow: auto; background: #fff; border-radius: 10px; padding: 4px 10px; border: 1px solid var(--rosa-claro); }
.estampa-pedido canvas { width: 100%; max-width: 520px; border: 1px solid #eee; border-radius: 8px; display: block; margin: 6px 0; }
/* página do produto */
.pers-palco { background: var(--degrade); border-radius: var(--raio); padding: 14px; }
.pers-palco canvas.caneca { width: 100%; display: block; cursor: grab; touch-action: pan-y; }
.pers-palco .lados { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 4px 0 6px; }
.pers-palco .lados button { padding: 6px 14px; font-size: 14px; }
.pers-palco .lados button:not(.ativo) { background: #fff; color: var(--rosa-escuro); }
.arte-inteira { background: #fff; border-radius: 12px; padding: 8px; }
.arte-inteira canvas { width: 100%; display: block; border-radius: 6px; touch-action: none; }
.arte-inteira small, .ilustrativa { display: block; text-align: center; color: var(--texto-suave); font-size: 13px; margin-top: 4px; }
.pers-palco .ilustrativa { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.estampas-op { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.estampa-op { background: #fff; border: 2px solid var(--rosa-claro); border-radius: 12px; padding: 6px; cursor: pointer; text-align: center; font-size: 13px; }
.estampa-op.ativo { border-color: var(--rosa-escuro); box-shadow: 0 0 0 3px var(--rosa-claro); }
.estampa-op canvas { width: 100%; display: block; border-radius: 6px; }
.estampa-op small { color: var(--texto-suave); }
.estampa-op.livre { display: flex; flex-direction: column; justify-content: center; min-height: 80px; }
.passo-pers { font-weight: bold; color: var(--rosa-escuro); margin: 16px 0 6px; }
.zoom { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.zoom input { flex: 1; }
.contador { float: right; font-weight: normal; color: var(--texto-suave); font-size: 13px; }
.mini-estampa { width: 100%; border-radius: 8px; border: 1px solid #f1e3e9; display: block; }
@media (max-width: 760px) {
	.ed-estampa { grid-template-columns: 1fr; }
	.estampas-op { grid-template-columns: repeat(2, 1fr); }
}
.bolinha-cor { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 3px; vertical-align: -1px; border: 1px solid #fff; box-shadow: 0 0 0 1px #ccc; }
.barra-espaco { height: 12px; background: #f1e3e9; border-radius: 6px; overflow: hidden; margin-top: 6px; }
.barra-espaco span { display: block; height: 100%; border-radius: 6px; }

/* ---------- Painel: visitas e semáforo dos limites ---------- */
.n-verde { --c: #2e9d57; --f: #e3f5ea; } .n-amarelo { --c: #c99700; --f: #fff6d6; } .n-roxo { --c: #7a3fc4; --f: #efe6fb; }
.n-vermelho { --c: #d32f2f; --f: #fde5e5; } .n-preto { --c: #1d1d1f; --f: #e9e9ea; } .n-cinza { --c: #9a8f95; --f: #f3f0f2; }
.aviso-limite { display: flex; gap: 12px; align-items: center; border-radius: 14px; padding: 12px 16px; margin: 0 0 12px; color: #fff; font-size: 15px; background: var(--c); }
.aviso-limite .bola-n { flex: 0 0 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 5px var(--c), 0 0 0 2px #fff; }
.aviso-limite a { color: #fff; font-weight: bold; margin-left: auto; white-space: nowrap; }
.legenda-limites { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--texto-suave); margin: 4px 0 12px; }
.legenda-limites span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c); margin-right: 5px; vertical-align: -1px; }
.limites { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.limite { background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: var(--sombra); border-left: 6px solid var(--c); }
.limite .topo-l { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.limite h3 { margin: 0; font-size: 16px; }
.limite .selo-n { background: var(--f); color: var(--c); font-weight: bold; border-radius: 10px; padding: 2px 10px; font-size: 13px; white-space: nowrap; }
.limite .num { font-size: 26px; font-weight: bold; color: var(--c); margin: 6px 0 2px; }
.limite .num small { font-size: 14px; color: var(--texto-suave); font-weight: normal; }
.limite .barra { position: relative; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #e3f5ea 0 50%, #fff6d6 50% 70%, #efe6fb 70% 85%, #fde5e5 85% 100%); overflow: hidden; margin: 8px 0 4px; }
.limite .barra i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c); border-radius: 6px; }
.limite .marcas { font-size: 11px; color: var(--texto-suave); position: relative; height: 14px; }
.limite .marcas span { position: absolute; transform: translateX(-50%); }
.limite ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; }
.limite .dica { background: var(--f); border-radius: 10px; padding: 8px 10px; font-size: 13px; margin-top: 8px; }
.limite .exato { font-size: 12px; color: var(--texto-suave); }
.grafico-caixa { background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: var(--sombra); margin: 14px 0; }
.grafico-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--rosa-escuro); }
.grafico-topo #gMesNome { min-width: 150px; text-align: center; display: inline-block; color: var(--texto); }
.rolagem-grafico { overflow-x: auto; }
.rolagem-grafico svg { display: block; min-width: 100%; }
.rolagem-grafico svg text { font-family: Delius, sans-serif; }
@media (max-width: 700px) { .limites { grid-template-columns: 1fr; } .aviso-limite { flex-wrap: wrap; } }

/* caneca 3D na página do produto */
#caneca3d canvas { border-radius: 12px; }